<template>
  <div>
    <el-dialog
      title="导入题目"
      :close-on-click-modal="false"
      :visible.sync="visible"
      lock-scroll
      width="800px"
      append-to-body
      v-if="visible"
    >
      <div class="dialog-body">
        <div class="subtitle">
          <i class="el-icon-info"></i>
          <span>上传前请先下载模板，按照模板要求将内容录入到模板中。</span>
        </div>
        <div style="padding:16px">
          <el-button
            type="success"
            plain
            icon="el-icon-download"
            @click="downloadTemplate"
            >下载模板</el-button
          >
        </div>
        <div>
          <el-upload
            class="upload-demo"
            drag
            :action="baseUrl + paperid+'/'+$store.getters.organizeId"
            :headers="{ Authorization: $store.getters.token }"
            :on-success="onSuccess"
            accept=".xlsx, .xls"
            :on-error="onError"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
          </el-upload>
        </div>
        <div class="explain">
          <h5>说明</h5>
          1.建议使用新版office或WPS软件编辑题目文件，仅支持上传.xlsx格式的文件
          <br />
          2.题目数量过多、题目文件过大（如图片较多）等情况建议分批导入 <br />
          3.需严格按照各题型格式要求编辑题目文件<br />
          4.批量导入无法识别excel内的样式，统一为默认样式
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "ImportTopic",
  props: {
    paperid: {
      required: true
    }
  },
  data() {
    return {
      baseUrl: `${
        this.define.comUrl
      }/v3/api/testPaperManage/Xy_ks_examination_paper/importData/true/`,
      visible: false
    };
  },
  methods: {
    // 下载模板
    downloadTemplate() {
      window.location.href =
        this.define.comUrl +
        "/v3/api/testPaperManage/Xy_ks_examination_paper/templateDownload";
    },
    // 文件上传成功时的钩子
    onSuccess() {
      this.$message.success("文件导入成功");
      this.visible = false;
      this.$emit("refresh", true);
    },
    //文件上传失败的钩子
    onError() {
      this.$message.error("文件上传失败，请仔细检查文件格式是否正确");
    }
  }
};
</script>
<style scoped lang="scss">
.dialog-body {
  text-align: center;
  .explain {
    margin-top: 10px;
    padding: 10px 20px;
    text-align: left;
    background-color: rgb(244, 244, 245);
    color: rgb(144, 147, 153);
    line-height: 1.4;
  }
}
>>> .el-dialog__header {
  border-bottom: 1px solid #dcdcdc;
}
>>> .el-upload-list__item {
  text-align: left;
}
</style>
